<template>
  <div class="main-container container-limited container-fluid page-holder" v-loading="loading">
    <breadcrumb />
    <progress-bar :state="feedback.state" />
    <div class="easy-container flex align-items-center">
      <div class="flex-1">
        反馈编号：<span class="p-r-30">{{ feedback.id }}</span>
        <timeago2 :date-time="feedback.created_at" timeago="none" pre-text="提交时间：" class="p-r-30" />
        状态：<span class="el-alert--error is-light">{{ feedback.stateCN }}</span>
      </div>
      <close-button v-if="!curUser.admin && !feedbackClosed" />
    </div>
    <comments />
    <reply v-if="Object.keys(feedback).length && !feedbackClosed" class="m-t-24" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Breadcrumb from '../breadcrumb';
import ProgressBar from './progress-bar';
import CloseButton from './close-button';
import comments from './comments';
import Reply from './reply';
import { formatFeedback } from '../format';

export default {
  name: 'FeedbackShow', // 查看反馈
  components: { Breadcrumb, ProgressBar, CloseButton, comments, Reply },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    ...mapState({
      curUser: 'currentUser',
      feedback: 'currentFeedback',
    }),
    feedbackClosed() { return this.feedback.state === 'closed'; },
  },
  created() { this.loadFeedback(); },
  destroyed() { this.removeCurrentFeedback(); },
  methods: {
    ...mapActions(['setCurrentFeedback', 'removeCurrentFeedback']),
    loadFeedback() {
      this.loading = true;
      this.$api.feedback.show({ feedbackId: this.$route.params.feedbackId })
        .then(res => this.setCurrentFeedback(formatFeedback(res.data)))
        .catch(() => this.$router.push('/feedback'))
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
